import styles from './index.less';
import request from 'umi-request';
import React, { useEffect, useState } from 'react';
import { history } from 'umi';
import { Popover } from 'antd';

/* 复制颜色转变 */
const CopyIcon = ({ fill = 'gray' }) => {
  return (
    <svg
      t="1691565957064"
      className={styles.icon}
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="2373"
      width="16"
      height="16"
    >
      <path
        d="M394.666667 106.666667h448a74.666667 74.666667 0 0 1 74.666666 74.666666v448a74.666667 74.666667 0 0 1-74.666666 74.666667H394.666667a74.666667 74.666667 0 0 1-74.666667-74.666667V181.333333a74.666667 74.666667 0 0 1 74.666667-74.666666z m0 64a10.666667 10.666667 0 0 0-10.666667 10.666666v448a10.666667 10.666667 0 0 0 10.666667 10.666667h448a10.666667 10.666667 0 0 0 10.666666-10.666667V181.333333a10.666667 10.666667 0 0 0-10.666666-10.666666H394.666667z m245.333333 597.333333a32 32 0 0 1 64 0v74.666667a74.666667 74.666667 0 0 1-74.666667 74.666666H181.333333a74.666667 74.666667 0 0 1-74.666666-74.666666V394.666667a74.666667 74.666667 0 0 1 74.666666-74.666667h74.666667a32 32 0 0 1 0 64h-74.666667a10.666667 10.666667 0 0 0-10.666666 10.666667v448a10.666667 10.666667 0 0 0 10.666666 10.666666h448a10.666667 10.666667 0 0 0 10.666667-10.666666v-74.666667z"
        fill={fill}
        p-id="2374"
      ></path>
    </svg>
  );
};

/* 复制 */
const handleCopy = (final) => {
  navigator.clipboard.writeText(final?.hash);
};

/* 更多跳转 */
const more = () => {
  history.push('/detail');
};

/* 获取哈希值 */
const handleBlockItemClick = (hash) => {
  // 其他逻辑...
  history.push(`/detail2?key=${hash}`);
};

export default function Card() {
  /* 请求数据 */
  const [card1, setCard] = useState([]);
  useEffect(() => {
    fetchData1();
  }, []);

  const fetchData1 = async () => {
    try {
      const response = await request.get('/api/getInfo');
      setCard(response.data);
    } catch (error) {
      console.error(error);
    }
  };

  const [hoverIndex, setHoverIndex] = useState(-1);

  return (
    <div className={styles.cardWrapper}>
      {/* 区块 */}
      <div className={styles.topCard}>
        <div className={styles.titleLine}>
          <span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
            >
              <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M17.1804 11.6167L21.12 13.8913L21.24 14.0991V18.6483L21.12 18.8562L17.1804 21.1308H16.9404L13.0007 18.8562L12.8807 18.6483V14.0991L13.0007 13.8913L16.9404 11.6167H17.1804ZM7.05965 11.6167L10.9998 13.8913L11.1198 14.0991V18.6483L10.9998 18.8562L7.05965 21.1308L6.81966 21.1308L2.88001 18.8562L2.76001 18.6483V14.0991L2.88001 13.8913L6.81966 11.6167L7.05965 11.6167ZM17.0592 13.7207L14.7624 15.0467V17.6999L17.0592 19.0247L19.3572 17.6999V15.0467L17.0592 13.7207ZM6.93961 13.7207L4.64161 15.0467V17.6999L6.93961 19.0247L9.23641 17.6999V15.0467L6.93961 13.7207ZM12.1202 2.85205L16.0599 5.12665L16.1799 5.3345V9.88369L16.0599 10.0915L12.1202 12.3661H11.8802L7.94059 10.0915L7.8206 9.88369V5.3345L7.94059 5.12665L11.8802 2.85205H12.1202ZM11.9988 4.9559L9.70201 6.2819V8.9351L11.9988 10.2611L14.2968 8.9351V6.2819L11.9988 4.9559Z"
                fill="#7F7F7F"
              />
            </svg>
          </span>
          <span className="overstriking">区块</span>
        </div>
        <div className={styles.more}>
          <span onClick={more} className={styles.moreIcon}>
            更多
          </span>
          <span>
            <svg
              t="1691490812421"
              className={styles.jianTouIcon}
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2556"
              width="10"
              height="10"
            >
              <path
                d="M312.888889 995.555556c-17.066667 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-17.066667-56.888889 5.688889-79.644445l364.088888-329.955555c11.377778-11.377778 17.066667-22.755556 17.066667-34.133333 0-11.377778-5.688889-22.755556-17.066667-34.133334L273.066667 187.733333c-22.755556-22.755556-28.444444-56.888889-5.688889-79.644444 22.755556-22.755556 56.888889-28.444444 79.644444-5.688889l364.088889 312.888889c34.133333 28.444444 56.888889 73.955556 56.888889 119.466667s-17.066667 85.333333-51.2 119.466666l-364.088889 329.955556c-11.377778 5.688889-28.444444 11.377778-39.822222 11.377778z"
                fill="#999999"
                p-id="2557"
              ></path>
            </svg>
          </span>
        </div>
      </div>

      {/* 区块值 */}
      <div>
        <div className={styles.bottomCard}>
          {card1.map((item, index) => (
            <div
              className={styles.blockitem}
              onClick={() => handleBlockItemClick(item.hash)}
              key={[item?.number]}
            >
              <div className={styles.riQi}>
                <a className={styles.floatLeft}>#{[item?.number]}</a>
                <span className={styles.floatRight}>
                  {[item?.writeTime]}
                  <span>
                    <svg
                      t="1691573905705"
                      className={styles.jianTou}
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="4431"
                      width="16"
                      height="16"
                    >
                      <path
                        d="M709.845333 250.346667a22.4 22.4 0 0 1 0.533334-30.848 20.48 20.48 0 0 1 29.717333 0.64l272.426667 292.693333-272.426667 292.650667a20.458667 20.458667 0 0 1-29.717333 0.64c-8.32-8.32-8.746667-21.973333-0.533334-30.848l242.346667-262.464-242.346667-262.464z"
                        fill="#515151"
                        p-id="4432"
                      ></path>
                    </svg>
                  </span>
                </span>
              </div>

              <div className={styles.bottomBlockitem}>
                <div className={styles.left}>
                  <div>区块哈希</div>
                  <div className={styles.haXi}>
                    <Popover
                      content={
                        <div className={styles.contentBox}>{item?.hash}</div>
                      } // 设置悬停内容
                      trigger="hover" // 设置触发事件为悬停
                    >
                      <div className={styles.haxiZhi}>{item?.hash}</div>
                    </Popover>
                    {/* 复制 */}
                    <div
                      onClick={(e) => {
                        e.stopPropagation();
                      }}
                    >
                      <span
                        onClick={() => handleCopy(item)}
                        onMouseEnter={() => {
                          setHoverIndex(index);
                        }}
                        onMouseLeave={() => {
                          setHoverIndex(-1);
                        }}
                      >
                        <CopyIcon
                          fill={index === hoverIndex ? '#1890ff' : 'gray'}
                          handleCopy={handleCopy}
                        />
                      </span>
                    </div>
                  </div>
                </div>

                <div className={styles.shuXian}></div>

                <div>
                  <div>交易数</div>
                  <div>
                    <span className={styles.txCounts}>{[item?.txCounts]}</span>
                    <span>
                      <span>
                        (<span>{item?.avgTime}</span>ms)
                      </span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className={styles.animate}>
          <div className={styles.animatebg}>
            <div className={styles.progress}>
              <div className={styles.slidermove}></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
